<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload=function(){
            /*
             * 使用原生DOM的方式，即直接操作真实DOM
             */
            var divDom=document.createElement('div')
            divDom.id='mydiv';
            divDom.title='this is a div';
            var h2Dom=document.createElement('h2');
            h2Dom.innerHTML='tom';
            var pDom=document.createElement('p');
            pDom.innerHTML='18';
            divDom.appendChild(h2Dom);
            divDom.appendChild(pDom);
            // document.getElementById('app').appendChild(divDom);

            /*
             * 虚拟DOM的方式
             */
            var domObject={ // 该对象就是Vue中所谓的虚拟DOM，通过JS对象的方式来表示节点结构树
                tagName:'div',
                attribute:{
                    attrs:{
                        id:'mydiv',
                        title:'this is a div'
                    }
                },
                children:[
                    {
                        tagName:'h3',
                        attribute:{
                            attrs:{
                                id:'myh3'
                            }
                        },
                        children:'tom'
                    },{
                        tagName:'p',
                        children:'20'
                    }
                ]
            }

            function createElement(obj){
                let tempDom=document.createElement(obj.tagName);

                if(obj.attribute){
                    if(obj.attribute.attrs){
                        for(let key in obj.attribute.attrs){
                            tempDom.setAttribute(key,obj.attribute.attrs[key]);
                        }
                    }
                }

                if(obj.children&&obj.children instanceof Array){
                    for(let i=0;i<obj.children.length;i++){
                        let childDom=createElement(obj.children[i]); // 递归调用
                        tempDom.appendChild(childDom);
                    }
                }else{
                    tempDom.innerHTML=obj.children;
                }

                return tempDom;
            }

            let domTree = createElement(domObject);
            document.getElementById('app').appendChild(domTree);
        }
    </script>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>